<template>
	<view>
		<view class="app-background"></view>
		<my-navbar>
			<template v-slot:navbar>
				<view class="home-navbar" @click="c_navbar.clickNavbar">
					<template v-if="jxyUserInfo.token">
						<image class="navbar-headicon" :src="jxyUserInfo.photo ? jxyUserInfo.photo : '/static/index/headicon_none.png'" mode="aspectFit"></image>
						<view class="navbar-title">
							<view class="title-pre">{{ c_navbar.title }}</view>
							<view class="title-sub">{{ c_navbar.subtitle }}</view>
						</view>
					</template>
					<template v-else>
						<image class="navbar-headicon" src="/static/index/headicon_none.png" mode="aspectFit"></image>
						<view class="navbar-title"><view class="title-pre">登录/注册</view></view>
					</template>
				</view>
			</template>
		</my-navbar>
		<view class="home-banner">
			<swiper
				class="banner-swiper"
				:indicator-dots="bannerList.count > 1"
				:autoplay="true"
				indicator-color="rgba(255, 255, 255,.3)"
				indicator-active-color="#fff"
				:duration="500"
				:circular="true"
			>
				<swiper-item v-for="(i, j) in bannerList.list" :key="j" @tap="bannerList.handJumpPage(i)">
					<image class="swiper-image" :src="i.bannerResource" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item v-if="bannerList.count === 0 && theme.resourcePath" @tap="bannerList.handJumpPage({})">
					<image class="swiper-image" :src="`${theme.resourcePath}/index/banner_0.png`"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="home-notice">
			<view class="notice-title">
				<image class="title-icon" src="/static/index/icon_trumpet.png"></image>
				<view>班级通知</view>
			</view>
			<template v-if="noticeList.code || !jxyUserInfo.token">
				<template v-if="noticeList.list.length">
					<NoticeList :list="noticeList.list" :count="noticeList.count" @handle="noticeList.handle"></NoticeList>
				</template>
				<template v-else>
					<view class="notice-none">
						<image class="none-image" src="/static/index/image_bell.png"></image>
						<template v-if="jxyUserInfo.token">
							<view class="none-text">还没有老师发布通知，快去发布吧</view>
							<view class="none-button app-button" hover-class="hover" @click="clickPublishButton">去发布</view>
						</template>
						<template v-else>
							<view class="none-text">登录更精彩</view>
							<view class="none-button app-button" hover-class="hover" @click="clickPublishButton">登录</view>
						</template>
					</view>
				</template>
			</template>
		</view>
		<template>
			<my-popup :custom="1" :show="p_join.show" @handle="p_join.handle">
				<view class="popup1">
					<view class="popup1-title">您还没有加入班级</view>
					<view class="popup1-content">加入班级后可以发布或查看班内老师发布的班级通知</view>
					<view class="popup1-buttons">
						<view class="button-item app-button" hover-class="hover" @click="p_join.clickButton(0)">取消</view>
						<view class="button-item primary app-button" hover-class="hover" @click="p_join.clickButton(1)">立即加入</view>
					</view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import NoticeList from '@/components/notice-list/notice-list';
import util from '@/common/util';
import logInStatusTackl from '@/common/mixin/mixinLogin.js';
import download from '@/common/http/download.js';
import sign from '@/common/sign.js'
export default {
	name: 'home',
	mixins: [logInStatusTackl],
	data() {
		return {
			noticeList: {
				pageNo: 1,
				pageSize: 10,
				pageCount: 0,
				count: 0,
				code: 0,
				list: [],
				getList: async ifRefresh => {
					const context = this.noticeList;
					if (ifRefresh) {
						context.pageNo = 1;
						context.pageCount = 0;
						context.count = 0;
					}
					if (context.pageCount !== 0 && context.pageNo >= context.pageCount + 1) {
						this.$showToast('已加载全部通知列表数据');
						return;
					}
					const page = {
						pageSize: context.pageSize,
						pageNo: context.pageNo
					};
					const data = {};
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.notice.get_list({
							page,
							data
						});
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取通知列表数据失败');
						context.code = err.code;
						return;
					}
					context.code = res1.code;
					if(!res1.result) {
						uni.hideLoading();
						return
					}
					context.pageCount = res1.result.pageCount;
					context.count = res1.result.count;
					if(!res1.result) {
						uni.hideLoading();
						return;
					}
					const platform = uni.getSystemInfoSync().platform;
					if (platform === 'ios') {
						res1.result.data.sort((a, b) => {
							const timeA =  new Date(a.cretime.replace(/-/g, '/')).getTime();
							const timeB = new Date(b.cretime.replace(/-/g, '/')).getTime();
							return timeB - timeA;
						});
						for (const i of res1.result.data) {
							i.friendlyTime = util.getFriendlyTime1(new Date(i.cretime.replace(/-/g, '/')));
						}
					} else {
						res1.result.data.sort((a, b) => {
							const timeA =  new Date(a.cretime).getTime();
							const timeB = new Date(b.cretime).getTime();
							return timeB - timeA;
						});
						for (const i of res1.result.data) {
							i.friendlyTime = util.getFriendlyTime1(new Date(i.cretime));
						}
					}
					if (ifRefresh) context.list = [];
					context.list.push(...res1.result.data);
					uni.hideLoading();
				},
				handle: (fn, e, payload) => {
					if (fn === 'clickCard') this.noticeList.handleClickCard(payload.item);
				},
				handleClickCard: item => {
					uni.navigateTo({
						url: '/packageA/pages/notice/noticeDetail?id=' + item.id
					});
				}
			},
			c_navbar: {
				title: '',
				subtitle: '',
				init: () => {
					const context = this.c_navbar;

					const date = new Date();
					const h = date.getHours();
					let hello;
					if (0 < h && h <= 12) {
						hello = '早上好';
					} else if (12 < h && h <= 18) {
						hello = '下午好';
					} else {
						hello = '晚上好';
					}
					context.title = `${hello}！${this.jxyUserInfo.name ? this.jxyUserInfo.name : '--'}老师`;

					let MM = date.getMonth() + 1;
					MM = MM.length < 2 ? `0${MM}` : MM;
					let DD = date.getDate();
					DD = DD.length < 2 ? `0${DD}` : DD;
					const day = date.getDay();
					context.subtitle = `今天是${MM}月${DD}日 ${util.getDayName1(day)}`;
				},
				clickNavbar: () => {
					if (this.logInStatusTackl()) return;
					uni.navigateTo({
						url: '/packageA/pages/my/userDetail'
					});
				}
			},
			p_join: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_join.show = false;
				},
				clickButton: id => {
					this.p_join.show = false;
					if (id == 0) return;
					uni.navigateTo({
						url: '/packageA/pages/my/selectSquad'
					});
				}
			},
			bannerList: {
				click: 0,
				clickTimer: null,
				//头部轮播
				pageNo: 1,
				pageSize: 0,
				count: 0,
				//广告列表
				list: [],
				//广告数据获取
				getList: async ifRefresh => {
					const context = this.bannerList;
					if (ifRefresh) {
						context.list = [];
						context.pageNo = 1;
						context.count = 0;
					}
					const page = {
						pageSize: context.pageSize,
						pageNo: context.pageNo
					};
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.activity.get_banner_list({
							page
						});
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取广告失败');
						return;
					}
					context.count = res1.result.count;
					context.list.push(...res1.result.data);
					uni.hideLoading();
				},
				//广告跳转
				handJumpPage: value => {
					const { bannerType, jumpIsExternal, jumpToUrl } = value;
					if (!jumpToUrl) {
						this.bannerList.click++
						if (this.bannerList.click >= 3) {
							this.$showToast('哎哟，别点了此图没有内容')
						}
						if (this.bannerList.clickTimer) clearTimeout(this.bannerList.clickTimer)
						this.bannerList.clickTimer = setTimeout(() => {
							this.bannerList.click = 0
							clearTimeout(this.bannerList.clickTimer)
							this.bannerList.clickTimer = null
						}, 1000)
						return;
					};
					if (bannerType == 1 || bannerType == 2) {
						if (jumpIsExternal == 'Y') {
							uni.navigateTo({
								url: `/packageA/pages/richTextWeb/webView?url=${encodeURIComponent(jumpToUrl)}`
							});
						} else {
							uni.navigateTo({
								url: new RegExp('^/.*$').test(jumpToUrl) ? jumpToUrl : `/${jumpToUrl}`
							});
						}
					} else {
						uni.setStorageSync('richTextData', {
							richTextData: value,
							richTextTypeName: 'bannerContent'
						});
						uni.navigateTo({
							url: '/packageA/pages/richTextWeb/richText'
						});
					}
				}
			}
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo,
			theme: state => state.Theme.theme
		})
	},
	methods: {
		// onShow
		async handleShow() {
			this.c_navbar.init();
			if(sign.UPDATE_NOTICE_LIST) {
				sign.UPDATE_NOTICE_LIST = false;
				uni.pageScrollTo({
					scrollTop: 0
				});
				try {
					await this.noticeList.getList(true);
				} catch (err) {}
			}
		},
		// onPullDownRefresh
		async handlePullDownRefresh() {
			this.c_navbar.init();
			try {
				await this.bannerList.getList(true);
			} catch (err) {}
			if (!this.jxyUserInfo.token) {
				uni.stopPullDownRefresh();
				return;
			}
			try {
				await this.noticeList.getList(true);
			} catch (err) {}
			uni.stopPullDownRefresh();
		},
		// onReachBottom
		async handleReachBottom() {
			if (!this.jxyUserInfo.token) return;
			this.noticeList.pageNo++;
			try {
				await this.noticeList.getList();
			} catch (err) {}
		},
		clickPublishButton() {
			if (this.logInStatusTackl()) return;
			if (this.jxyUserInfo.relateStatus === 'noClass') {
				this.p_join.show = true;
				return;
			}
			uni.navigateTo({
				url: '/packageA/pages/notice/sendNotice'
			});
		}
	},
	async created() {
		this.c_navbar.init();
		try {
			await this.bannerList.getList(true);
		} catch (err) {}
		if (!this.jxyUserInfo.token) return;
		try {
			await this.noticeList.getList(true);
		} catch (err) {}
	},
	components: {
		NoticeList
	}
};
</script>

<style lang="less" scoped>
.popup1 {
	width: 594rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	overflow: hidden;

	color: #222222;

	.popup1-title {
		font-size: 36rpx;
		text-align: center;
		font-weight: 500;

		padding-top: 60rpx;
	}

	.popup1-content {
		line-height: 60rpx;
		padding: 40rpx 30rpx;

		font-size: 32rpx;
	}

	.popup1-buttons {
		height: 90rpx;
		border-top: 2rpx solid #e3e4e699;

		display: flex;

		.button-item {
			flex: 1;
			border-right: 2rpx solid #e3e4e699;

			position: relative;

			font-size: 32rpx;
			font-weight: 500;
			color: #222222;

			display: flex;
			align-items: center;
			justify-content: center;

			&:last-child {
				border-right: none;
			}

			&.primary {
				color: #ff6600;
			}
		}
	}
}

.home-navbar {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 30rpx;

	.navbar-headicon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.navbar-title {
		display: flex;
		flex-direction: column;

		.title-pre {
			font-size: 28rpx;
			font-weight: 700;
			color: #222222;
		}

		.title-sub {
			font-size: 24rpx;
			color: #808080;
		}
	}
}

.home-banner {
	width: 750rpx;
	padding: 30rpx;
	box-sizing: border-box;

	.banner-swiper {
		height: 260rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.swiper-image {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}
	}
}

.home-notice {
	padding: 0 30rpx;

	.notice-title {
		font-size: 28rpx;
		color: #707070;

		display: flex;
		flex-direction: row;
		align-items: center;

		.title-icon {
			width: 37rpx;
			height: 31rpx;
			margin-right: 10rpx;
		}
	}

	.notice-none {
		display: flex;
		flex-direction: column;
		align-items: center;

		position: absolute;
		left: 50%;
		top: 52.5%;
		transform: translate(-50%, -50%);

		.none-image {
			width: 334rpx;
			height: 255rpx;
			margin-top: 100rpx;
		}

		.none-text {
			font-size: 28rpx;
			color: #707070;
			margin-top: 70rpx;
		}

		.none-button {
			width: 448rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #fd8c19, #ff6600);
			border-radius: 44rpx;
			margin-top: 20rpx;

			position: relative;

			font-size: 32rpx;
			color: #ffffff;

			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
